<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
		<link rel="stylesheet" href="../css/style-reset.css">
		<title>我的课程</title>

		<style>
			.content{
				padding: 1px;
			}
			/* nav-tab */
			.nav-tab{
				width: 80%;
				margin: 20px auto;
				font-size: 0;
				border: 1px solid #dcdcdc;
				background-color: #fff;
			}
			.nav-tab li{
				display: inline-block;
				width: 33%;
			}
			.nav-tab li:nth-child(2){
				border-left: 1px solid #dcdcdc;
				border-right: 1px solid #dcdcdc;
			}
			.nav-tab li a{
				display: inline-block;
				width: 100%;
				padding: 10px 0;
				font-size: 14px;
				color: #b4b4b4;
				text-align: center;
			}
			.nav-tab .active a{
				background-color: #53ceca;
				color: #fff;
			}
			/* classes */
			.classes{
				padding: 0 14px;
			}
			ul.classes li{
				border: 1px solid #dcdcdc;
				border-radius: 4px;
				margin-bottom: 10px;
			}
			.b,
			.t{
				overflow: hidden;
				padding: 10px 15px;
			}
			.t{
				border-bottom: 2px dotted #fff;
			}
			.b-link{
				display: block;
				overflow: hidden;
			}
			.left{
				float: left;
			}
			.right{
				float: right;
			}
			.left .photo{
				display: inline-block;
				width: 50px;
				height: 50px;
				border: 2px solid #fff;
				border-radius: 50%;

			}
			.photo img{
				display: inline-block;
				width: 100%;
				height: 100%;
				border: none;
				border-radius: 50%;
				background-size: 100% 100%;
			}
			.date,
			.time{
				color: #fff;
				text-align: right;
			}
			.date{
				font-size: 13px;
				margin-top: 5px;
				margin-bottom: 10px;
			}
			.time{
				font-weight: 600;
				font-size: 16px;
				font-family: "Hirangino Sans GB W6"
			}
			.b span.left{
				display: block;
			}
			.class-name,
			.addr{
				display: block;
			}
			.class-name{
				padding-bottom: 5px;
				font-size: 14px;
			}
			.addr{
				font-size: 13px;
				color: #b4b4b4;
			}
			.arrow{
				display: inline-block;
				width: 11px;
				height: 16px;
				margin-top: 10px;
				background-size: 100% 100%;
				background-repeat: no-repeat;
				background-image: url(../images/icons/arrow_in.png);
			}
			/* unclass */
			.unclass .t{
				background-color: #53ceca;
			}
			/* finished canceled */
			.finished .t,
			.canceled .t{
				background-color: #b4b4b4;
			}
			.unclass .left .photo,
			.unclass .left .select-btn,
			.finished .left .photo,
			.finished .left .select-btn,
			.canceled .left .photo,
			.canceled .left .select-btn{
				float: left;
			}
			.unclass .left .select-btn,
			.finished .left .select-btn,
			.canceled .left .select-btn{
				display: inline-block;
				width: 70px;
				margin-top: 10px;
				margin-left: 10px;
				border: 2px solid #fff;
				border-radius: 4px;
			}
			.unclass .left .select-btn{
				background-color: #fab345;
			}
			.finished .left .select-btn,
			.canceled .left .select-btn{
				background-color: #53ceca;
			}
			.unclass .left .select-btn a,
			.finished .left .select-btn a,
			.canceled .left .select-btn a{
				display: inline-block;
				width: 70px;
				padding: 5px 0;
				font-size: 14px;
				color: #fff;
				text-align: center;
			}
			.finished .my-evaluate{
				display: inline-block;
				margin-top: 12px;
				margin-left: 5px;
			}
			.finished .my-evalu-title{
				display: block;
				font-size: 13px;
				color: #fff;
				text-align: center;
			}
			.finished .stars{
				display: block;
				font-size: 0;
				margin-top: 5px;
			}
			.finished .star{
				display: inline-block;
				width: 12px;
				height: 12px;
				margin: 0 2px;
				background-image: url(../images/icons/star_small_uns.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.finished .star.select{
				background-image: url(../images/icons/star_small_s.png);
			}
		</style>
	</head>
	<body>
		<div class="content">
			<ul class="nav-tab">
				<li class="unselect active"><a href="">待上课</a></li>
				<li class="unselect"><a href="">已完成</a></li>
				<li class="unselect"><a href="">已取消</a></li>
			</ul>
			<ul class="classes">
				<ul class="unclass" style="display: block;">
					<li class="item">
						<div class="t">
							<div class="left ">
								<span class="photo"><img src="../images/1.png" alt=""></span>
								<span class="select-btn"><a href="">退课</a></span>
							</div>
							<div class="right">
								<p class="date">7月9日 星期四</p>
								<p class="time">19:00 - 20:00</p>
							</div>
						</div>
						<div class="b">
							<a class="b-link" href="">
								<span class="left">
									<span class="class-name">塑身瑜伽体验课</span>
									<span class="addr">悠季瑜伽（朝阳公园南路1号网球中心）</span>
								</span>
								<span class="right arrow"></span>
							</a>
						</div>
					</li>
					<li class="item">
						<div class="t">
							<div class="left ">
								<span class="photo"><img src="../images/1.png" alt=""></span>
								<span class="select-btn"><a href="">退课</a></span>
							</div>
							<div class="right">
								<p class="date">7月9日 星期四</p>
								<p class="time">19:00 - 20:00</p>
							</div>
						</div>
						<div class="b">
							<a class="b-link" href="">
								<span class="left">
									<span class="class-name">塑身瑜伽体验课</span>
									<span class="addr">悠季瑜伽（朝阳公园南路1号网球中心）</span>
								</span>
								<span class="right arrow"></span>
							</a>
						</div>
					</li>
					<li class="item">
						<div class="t">
							<div class="left ">
								<span class="photo"><img src="../images/1.png" alt=""></span>
								<span class="select-btn"><a href="">退课</a></span>
							</div>
							<div class="right">
								<p class="date">7月9日 星期四</p>
								<p class="time">19:00 - 20:00</p>
							</div>
						</div>
						<div class="b">
							<a class="b-link" href="">
								<span class="left">
									<span class="class-name">塑身瑜伽体验课</span>
									<span class="addr">悠季瑜伽（朝阳公园南路1号网球中心）</span>
								</span>
								<span class="right arrow"></span>
							</a>
						</div>
					</li>
				</ul>
				<ul class="finished" style="display: none;">
					<li class="item">
						<div class="t">
							<div class="left ">
								<span class="photo"><img src="../images/1.png" alt=""></span>
								<span class="select-btn"><a href="">去评价</a></span>
							</div>
							<div class="right">
								<p class="date">7月9日 星期四</p>
								<p class="time">19:00 - 20:00</p>
							</div>
						</div>
						<div class="b">
							<a class="b-link" href="">
								<span class="left">
									<span class="class-name">塑身瑜伽体验课</span>
									<span class="addr">悠季瑜伽（朝阳公园南路1号网球中心）</span>
								</span>
								<span class="right arrow"></span>
							</a>
						</div>
					</li>
					<li class="item">
						<div class="t">
							<div class="left ">
								<span class="photo"><img src="../images/1.png" alt=""></span>
								<span class="my-evaluate">
									<span class="my-evalu-title">我的评价</span>
									<span class="stars">
										<span class="star select"></span>
										<span class="star select"></span>
										<span class="star select"></span>
										<span class="star"></span>
										<span class="star"></span>
									</span>
								</span>
							</div>
							<div class="right">
								<p class="date">7月9日 星期四</p>
								<p class="time">19:00 - 20:00</p>
							</div>
						</div>
						<div class="b">
							<a class="b-link" href="">
								<span class="left">
									<span class="class-name">塑身瑜伽体验课</span>
									<span class="addr">悠季瑜伽（朝阳公园南路1号网球中心）</span>
								</span>
								<span class="right arrow"></span>
							</a>
						</div>
					</li>
				</ul>
				<ul class="canceled" style="display: none;">
					<li class="item">
						<div class="t">
							<div class="left ">
								<span class="photo"><img src="../images/1.png" alt=""></span>
								<span class="select-btn"><a href="">重新选课</a></span>
							</div>
							<div class="right">
								<p class="date">7月9日 星期四</p>
								<p class="time">19:00 - 20:00</p>
							</div>
						</div>
						<div class="b">
							<a class="b-link" href="">
								<span class="left">
									<span class="class-name">塑身瑜伽体验课</span>
									<span class="addr">悠季瑜伽（朝阳公园南路1号网球中心）</span>
								</span>
								<span class="right arrow"></span>
							</a>
						</div>
					</li>
				</ul>
			</ul>
		</div>
	</body>
</html>